<script setup>
import { inject } from 'vue';

const fileStore = inject('fileStore');

const props = defineProps({
  availableFunctions: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['functionChange']);

const handleFunctionChange = () => {
  emit('functionChange');
};
</script>

<template>
  <div class="card">
    <div class="function-selector">
      <div class="selector-left">
        <el-select
          @change="handleFunctionChange"
          v-model="fileStore.selectedFunction"
          placeholder="选择处理功能"
          class="function-select"
        >
          <el-option
            v-for="item in availableFunctions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <!-- 原有功能参数 -->
        <div v-if="fileStore.selectedFunction === 'format_survey_files'" class="function-params">
          <span class="param-label">普查员姓名:</span>
          <el-input v-model="fileStore.surveyName" placeholder="请输入姓名" class="param-input" />
          <span class="param-label">普查范围:</span>
          <el-input-number
            controls-position="right"
            v-model="fileStore.surveyStart"
            :min="1"
            class="param-number"
          />
          <span class="param-separator">至</span>
          <el-input-number
            controls-position="right"
            v-model="fileStore.surveyEnd"
            :min="1"
            class="param-number"
          />
        </div>

        <div v-if="fileStore.selectedFunction === 'compare'" class="function-params">
          <span class="param-label">对比列名:</span>
          <el-input
            v-model="fileStore.compareKey"
            placeholder="例如：用户编号 或 ID"
            class="param-input"
          />
        </div>

        <div v-if="fileStore.selectedFunction === 'sync_remarks'" class="function-params">
          <span class="param-label">匹配列(逗号分隔):</span>
          <el-input
            v-model="fileStore.syncKeyColumns"
            placeholder="例如：用户编号,地址"
            class="param-input"
          />
          <span class="param-label">副文件备注列名:</span>
          <el-input
            v-model="fileStore.syncRemarkColumn"
            placeholder="例如：备注"
            class="param-input"
          />
        </div>

        <div v-if="fileStore.selectedFunction === 'split_by_header'" class="function-params">
          <span class="param-label">分组表头名:</span>
          <el-input
            v-model="fileStore.splitHeaderName"
            placeholder="例如：抄表员"
            class="param-input"
          />
          <span class="param-label">附加筛选表头:</span>
          <el-input
            v-model="fileStore.splitExtraHeader"
            placeholder="例如：备注（可选）"
            class="param-input"
          />
          <span class="param-label">对应值(逗号分隔):</span>
          <el-input
            v-model="fileStore.splitExtraValues"
            placeholder="例如：待处理"
            class="param-input"
          />
        </div>

        <div v-if="fileStore.selectedFunction === 'sample_meter_list'" class="function-params">
          <span class="param-label">筛选表头:</span>
          <el-input
            v-model="fileStore.sampleHeaderName"
            placeholder="例如：抄表员"
            class="param-input"
          />
          <span class="param-label">筛选值(逗号分隔):</span>
          <el-input
            v-model="fileStore.sampleFilterValues"
            placeholder="例如：张三,李四"
            class="param-input"
          />
          <span class="param-label">总条数:</span>
          <el-input-number
            controls-position="right"
            v-model="fileStore.sampleTotalCount"
            :min="1"
            :max="10000"
            class="param-number"
          />
        </div>

        <div v-if="fileStore.selectedFunction === 'filter_common_values'" class="function-params">
          <span class="param-label">对比表头:</span>
          <el-input
            v-model="fileStore.filterHeaderName"
            placeholder="例如：用户编号"
            class="param-input"
          />
        </div>

        <div
          v-if="fileStore.selectedFunction === 'compare_header_consistency'"
          class="function-params"
        >
          <span class="param-label">匹配表头:</span>
          <el-input
            v-model="fileStore.consistencyMatchHeader"
            placeholder="例如：ID"
            class="param-input"
          />
          <span class="param-label">对比表头:</span>
          <el-input
            v-model="fileStore.consistencyCompareHeader"
            placeholder="例如：金额"
            class="param-input"
          />
        </div>

        <!-- 新增功能参数 -->
        <div v-if="fileStore.selectedFunction === 'format_survey_enhanced'" class="function-params">
          <span class="param-label">标题文本:</span>
          <el-input
            v-model="fileStore.surveyEnhancedTitleText"
            placeholder="例如：水表普查清单"
            class="param-input"
          />
          <span class="param-label">开始行号:</span>
          <el-input-number
            controls-position="right"
            v-model="fileStore.surveyEnhancedStartIndex"
            :min="0"
            class="param-number"
          />
          <span class="param-label">结束行号:</span>
          <el-input-number
            controls-position="right"
            v-model="fileStore.surveyEnhancedEndIndex"
            :min="0"
            class="param-number"
          />
          <span class="param-label">保留列(逗号分隔):</span>
          <el-input
            v-model="fileStore.surveyEnhancedColumnsToKeep"
            placeholder="例如：用户编号,水表表号,地址"
            class="param-input"
          />
        </div>

        <div
          v-if="fileStore.selectedFunction === 'split_by_header_enhanced'"
          class="function-params"
        >
          <span class="param-label">分组表头名:</span>
          <el-input
            v-model="fileStore.splitEnhancedHeaderName"
            placeholder="例如：抄表员"
            class="param-input"
          />
          <span class="param-label">拆分到:</span>
          <el-select v-model="fileStore.splitEnhancedSplitTo" class="param-select">
            <el-option label="不同文件" value="files" />
            <el-option label="同一文件不同Sheet" value="sheets" />
          </el-select>
          <span class="param-label">附加筛选表头:</span>
          <el-input
            v-model="fileStore.splitEnhancedExtraHeader"
            placeholder="例如：备注（可选）"
            class="param-input"
          />
          <span class="param-label">对应值(逗号分隔):</span>
          <el-input
            v-model="fileStore.splitEnhancedExtraValues"
            placeholder="例如：待处理"
            class="param-input"
          />
        </div>

        <div v-if="fileStore.selectedFunction === 'sample_data'" class="function-params">
          <span class="param-label">筛选表头:</span>
          <el-input
            v-model="fileStore.sampleDataHeaderName"
            placeholder="例如：抄表员（可选）"
            class="param-input"
          />
          <span class="param-label">筛选值(逗号分隔):</span>
          <el-input
            v-model="fileStore.sampleDataFilterValues"
            placeholder="例如：张三,李四（可选）"
            class="param-input"
          />
          <span class="param-label">总条数:</span>
          <el-input-number
            controls-position="right"
            v-model="fileStore.sampleDataTotalCount"
            :min="1"
            :max="10000"
            class="param-number"
          />
          <span class="param-label">输出文件名:</span>
          <el-input
            v-model="fileStore.sampleDataOutputFile"
            placeholder="例如：抽样结果.xlsx"
            class="param-input"
          />
          <span class="param-label">保留列(逗号分隔):</span>
          <el-input
            v-model="fileStore.sampleDataColumnsToKeep"
            placeholder="例如：序号,用户编号,水表表号（可选）"
            class="param-input"
          />
        </div>

        <div v-if="fileStore.selectedFunction === 'budget_calculation'" class="function-params">
          <span class="param-label">目标金额:</span>
          <el-input-number
            controls-position="right"
            v-model="fileStore.budgetTargetAmount"
            :min="1"
            class="param-number"
          />
          <span class="param-label">用户列表(JSON):</span>
          <el-input
            v-model="fileStore.budgetUsers"
            placeholder='[{"name":"用户1","address":"地址1"},...]'
            class="param-input w-400px!"
            type="textarea"
            :rows="3"
          />
        </div>

        <div v-if="fileStore.selectedFunction === 'merge_excel_files'" class="function-params">
          <span class="param-label">输出文件名:</span>
          <el-input
            v-model="fileStore.mergeOutputFilename"
            placeholder="例如：合并文件.xlsx"
            class="param-input"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid #ebeef5;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.12);
}

.function-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}

.selector-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.function-select {
  width: 220px;
}

.function-select :deep(.el-input__inner) {
  border-radius: 8px;
}

.function-params {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, #f0f7ff, #f6ffed);
  border-radius: 8px;
  border: 1px solid #e1f3d8;
}

.param-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.param-input {
  width: 140px;
}

.param-input :deep(.el-input__inner) {
  border-radius: 6px;
}

.param-select {
  width: 140px;
}

.param-number {
  width: 100px;
}

.param-number :deep(.el-input-number__decrease),
.param-number :deep(.el-input-number__increase) {
  border-radius: 6px 0 0 6px;
}

.param-number :deep(.el-input-number__increase) {
  border-radius: 0 6px 6px 0;
}

.param-separator {
  color: #67c23a;
  font-weight: 500;
}

@media (max-width: 768px) {
  .function-selector {
    flex-direction: column;
    align-items: stretch;
  }

  .selector-left {
    flex-direction: column;
    align-items: stretch;
  }

  .function-select {
    width: 100%;
  }

  .function-params {
    flex-direction: column;
    align-items: stretch;
  }

  .param-input,
  .param-select,
  .param-number {
    width: 100%;
  }
}
</style>
